<template>
  <div class="leftItem">
    <!-- 我的服务 -->
    <div class="myServe" v-if="itemData.description.includes('物业服务')">
      <div class="serveName">{{itemData.positionName}}</div>
      <div class="serveList">
        <div 
          class="serveItem" 
          v-for="(item, index) in userCenterPropertyService.materialList" 
          :key="index"
        >
          <div style="width:24px;height:26px;margin: 0 auto;">
            <img :src="item.materialIcon" style="width:100%;"/>
          </div>
          <div class="materialName">{{item.materialName}}</div>
        </div>
      </div>
    </div>
    <!-- 我的预约 -->
    <div class="Myappointment" v-if="itemData.description.includes('服务订单状态')">
      <div class="positionName">{{itemData.positionName}}</div>
      <div class="conttentBox">
        <div 
          class="MyappointmentItem" 
          v-for="(item, index) in itemData.materialList" 
          :key="index"
        >
          <div class="top">
            <img :src="item.materialIcon"/>
          </div>
          <div class="bottom">{{item.materialName}}</div>
        </div>
      </div>
    </div>
    <!-- 积分优惠卷 -->
    <div class="Myintegral" v-if="itemData.description.includes('个人中心资产')">
      <div class="one" 
        v-for="(item, index) in itemData.materialList" 
        :key="index"
      >
        <div class="left">
          <div>{{index == 0 ? '23' : '168'}}</div>
          <div>{{index == 0 ? '积分': '优惠券'}}</div>
        </div>
        <div class="imgBox">
          <img :src="item.materialIcon"/>
        </div>
      </div>
    </div>
    <!-- 用户订单 -->
    <div class="userOrder" v-if="itemData.description.includes('用户中心-订单状态')">
      <div class="positionName">{{itemData.positionName}}</div>
      <div class="userOrderContent">
        <div 
          class="items" 
          v-for="(item,index) in itemData.materialList" 
          :key="index"
        >
          <div class="top">
            <img :src="item.materialIcon"/>
          </div>
          <div>{{item.materialName}}</div>
        </div>
      </div>
    </div>
    <!-- 热门活动 -->
    <div class="hotactivity" v-if="itemData.description.includes('用户中心-热门活动')">
      <div v-for="(item,index) in itemData.materialList" :key="index">
        <img :src="item.materialIcon"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['itemData'],
  data() {
    return {
      userCenterPropertyService: {}, // 服务
    }
  },
  watch: {
    itemData: {
      handler(newvalue) {
        console.log(newvalue)
        if(newvalue.positionCode == 'userCenterPropertyService') {
          this.userCenterPropertyService = newvalue
          this.userCenterPropertyService.materialList = this.userCenterPropertyService.materialList.splice(0,4)
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.leftItem{
  width: 80%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border-radius: 10px;
  transform: translateY(-60px);
  background-color: #fff;
  box-shadow:0 2px 15px 0 rgba(0,0,0,.05);
  margin-bottom: 30px;
}
.myServe{
  width: 100%;
  height: 150px;
}
.serveName{
  width: 100%;
  height: 56px;
  line-height: 56px;
}
.serveList{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.serveItem{
  width: 20%;
  height: 72px;
  padding-top: 22px;
  background-color: rgb(255, 255, 0);
}
.materialName{
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: 15px;
}
.white{
  height: 30px;
  width: 100%;
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.Myappointment{
  .positionName{
    width: 100%;
    height: 56px;
    line-height: 56px;
  }
  .conttentBox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .top{
      width: 48px;
      height: 48px;
      img{
        width: 48px;
        height: 48px;
      }
    }
    .bottom{
      font-size: 12px;
      font-weight: 500;
      text-align: center;
    }
  }
}
.Myintegral{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
  .one{
    width: 50%;
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .imgBox{
      width: 90px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(255, 247, 242);
      border-radius: 20px;
      margin-left: 15px;
      img{
        width: 30px;
        height: 30px;
      }
    }
  }
}
.userOrder{
  .positionName{
    height: 56px;
    line-height: 56px;
    font-size: 16px;
  }
  .userOrderContent{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
  }
}
.hotactivity{
  padding-top: 20px;
}
</style>